<template>
  <div class="home-main-container">
    <!-- 顶部分类导航区 -->
    <HomeNavchild></HomeNavchild>
    <div class="home-box">
      <!-- 左侧内容区 -->
      <div class="home-content">
        <div class="header">
          <!-- 文章排序类型 -->
          <span
            class="params"
            v-for="(item, i) in sortType"
            :key="i"
            @click="refreshSortType(item.name, item.id)"
            :class="{ actived: checked === item.name }"
          >
            {{ item.name }}
            <span :class="{ hidden: i == 2 }">
              <el-divider direction="vertical"></el-divider>
            </span>
          </span>
          <!-- 选择框 -->
          <el-select
            v-model="value"
            placeholder="3天内"
            size="mini"
            v-show="showSelector"
            @change="handleChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 文章列表 -->
        <Skeleton :loading="isLoadingSkeleton">
          <ArticlesLsit :articlesList="articlesLsit"></ArticlesLsit>
        </Skeleton>
        <div v-show="isLoading" class="loading">
          <i class="el-icon-loading"></i>
        </div>
      </div>
      <!-- 右侧广告 -->
      <HomeAside></HomeAside>
    </div>
  </div>
</template>

<script>
import { reqArticle } from '@/api/home'
import ArticlesLsit from '@/components/articlesList/ArticlesList.vue'
import Skeleton from '@/components/skeleton/Skeleton.vue'
import HomeAside from './HomeAside.vue'
import HomeNavchild from './HomeNavChild.vue'
export default {
  data() {
    return {
      // 下拉框配置
      options: [
        {
          value: 3,
          label: '3天内'
        },
        {
          value: 7,
          label: '7天内'
        },
        {
          value: 30,
          label: '30天内'
        },
        {
          value: 0,
          label: '全部'
        }
      ],
      // 排序栏配置
      sortType: [
        { name: '推荐', id: 200 },
        { name: '最新', id: 300 },
        { name: '热榜', id: 3 }
      ],
      // 选中下拉框的内容
      value: '',
      // 请求参数
      //  * @param {num} sort_type - 排序类别
      //  * 推荐：200
      //  * 最新：300
      //  * 热榜3天内：3
      //  * 热榜7天内：7
      //  * 热榜30天内：30
      //  * 热榜全部：0
      //  * @param {string} cursor - 偏移量
      //  * @param {num} limit - 请求数量
      params: {
        sort_type: 200,
        cursor: '0',
        limit: 20
      },
      // 文章列表
      articlesLsit: [],
      // 选中的排序方式
      checked: '',
      // 官网的要求,点击热门后才会出现
      showSelector: false,
      // 是否在发起上拉刷新请求
      isLoading: false,
      // 是否在发起新分类请求(与上拉触底的不一样)
      isLoadingSkeleton: false
    }
  },
  created() {
    // 触底后会有一个 homeToBottom 发送过来
    this.$bus.$on('homeToBottom', this.getNewDate)
    // 导航分类变化时，homeCateChange 会发送过来
    this.$bus.$on('homeCateChange', (cate_id) => {
      // console.log('我的分类子列表', list, cate_id)
      document.documentElement.scrollTop = 0

      this.$message.success(
        `分类ID：${cate_id},接口没有分类参数，这里走传参流程`
      )
      // 刷新数据,其实少了一步改参的操作,原因在于接口没有该参数
      this.getArticles('refresh')
    })
    // 页面刷新时读取点击状态
    this.checked = window.sessionStorage.getItem('checked') || '推荐'
    this.value = window.sessionStorage.getItem('value') || ''
    this.showSelector = this.checked === '热榜' ? true : false
    this.params.sort_type = window.sessionStorage.getItem('sort_type ') || 200
    this.getArticles('refresh')
  },
  methods: {
    // 获取文章
    async getArticles(type) {
      // 分类变化时刷新数据
      if (type === 'refresh') {
        // 第一次获取数据应重置偏移量
        this.params.cursor = '0'
        this.isLoadingSkeleton = true
        console.log('发起新请求')
        const { data: res } = await reqArticle(this.params)
        // 获取偏移量
        this.params.cursor = res.cursor
        this.articlesLsit = res.data
        this.isLoadingSkeleton = false
        console.log(res)
      }
      // 触底时拼接新旧数据
      else {
        this.isLoading = true
        console.log('发起拼接请求')
        const { data: res } = await reqArticle(this.params)
        // 获取偏移量
        this.params.cursor = res.cursor
        this.articlesLsit = [...this.articlesLsit, ...res.data]
        this.isLoading = false
        console.log(res)
      }
    },
    // 触底后发起拼接请求
    getNewDate() {
      // 防止多次请求
      if (this.isLoading) return
      console.log('home连接新数据')
      this.getArticles()
    },
    // 点击分类栏
    refreshSortType(name, id) {
      this.checked = name
      window.sessionStorage.setItem('checked', name)
      window.sessionStorage.setItem('sort_type ', id)
      if (name === '热榜') this.showSelector = true
      else this.showSelector = false
      this.params.sort_type = id
      this.getArticles('refresh')
    },
    // 监听下拉框的点击
    handleChange(id) {
      this.params.sort_type = id
      window.sessionStorage.setItem('sort_type ', id)
      this.options.forEach((item) => {
        if (item.value === id)
          window.sessionStorage.setItem('value', item.label)
      })
      console.log(id)
      this.getArticles('refresh')
    }
  },
  components: {
    ArticlesLsit,
    Skeleton,
    HomeAside,
    HomeNavchild
  },
  beforeDestroy() {
    this.$bus.$off('homeToBottom')
    this.$bus.$off('homeCateChange')
  }
}
</script>

<style lang="less" scoped>
:deep(.el-input__inner) {
  width: 8rem;
}

.home-main-container {
  margin-top: 9.67rem;
  .home-box {
    position: relative;
  }

  .home-content {
    width: 700px;
    margin-right: auto;
    background-color: #fff;
    min-height: 100vh;
    border-radius: 2px;

    .header {
      font-size: 1.17rem;
      padding: 1rem 1.6rem;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      align-items: center;
      height: 2.4rem;
      margin-bottom .params {
        font-size: 1.2rem;
        color: var(--taojin-font-3);
        cursor: pointer;
      }

      .params:hover {
        color: var(--taojin-brand-2-hover);
        cursor: pointer;
      }

      .hidden {
        visibility: hidden;
      }
    }

    .loading {
      margin: 1rem auto;
      text-align: center;
    }
  }
}

.actived {
  color: var(--hover-color) !important;
}
</style>
